<template>
	<view
		class="wrap-local-store-index flex column"
		v-if="dataInfo && dataInfo.category"
		:style="'height:calc(100vh - ' + topHeight + 'px)'"
	>
		<view class="wrap-store-info flex align-center">
			<image class="logo" :src="$getImageURL(dataInfo.avatar)" />

			<view class="store-info flex column">
				<view class="name-bg flex align-center">
					<text class="sign f-20">
						{{ dataInfo.isself === 1 ? "自营" : ["个人", "企业", "旗舰"][dataInfo.state] }}
					</text>

					<text class="name fBold limit-num-line f-30">{{ dataInfo.shopname }}</text>
				</view>

				<view class="store-score flex align-center">
					<view class="item flex column">
						<view class="text f-24">评分</view>

						<view class="score f-24">{{ dataInfo.star }}</view>
					</view>

					<view class="item flex column">
						<view class="text f-24">月售</view>

						<view class="score f-24">{{ dataInfo.month_sales }}</view>
					</view>

					<view class="collect flex align-center">
						<text class="f-26" v-if="dataInfo.isFollow === 0" @click.stop="handleFollow">
							<text class="wlIcon-31xuanze text-bold margin-right-xs"></text>

							<text>关注</text>
						</text>

						<text class="f-26" v-else @click.stop="handleFollow">
							<text class="wlIcon-31guanbi text-bold margin-right-xs"></text>

							<text>取关</text>
						</text>
					</view>
				</view>
			</view>
		</view>

		<view class="wrap-list flex">
			<scroll-view class="first-cate-bg" scroll-y v-if="dataInfo.category.length > 0">
				<block v-for="(item, index) in dataInfo.category" :key="index">
					<view
						class="first-cate-item flex column align-center just-center f-28"
						:class="first_cate == item.id ? 'first-active' : ''"
						@click.stop="onFirstCate(item, index)"
					>
						{{ item.name }}
					</view>
				</block>
				<view class="safe-area"></view>
			</scroll-view>

			<scroll-view class="list-right safe-area" scroll-y>
				<view
					class="second-cate-bg"
					v-if="first_index > -1 && dataInfo.category[first_index].childlist.length > 0"
				>
					<view class="title f-28">{{ dataInfo.category[first_index].name }}</view>

					<view class="second-cate-list flex">
						<block v-for="(item, index) in dataInfo.category[first_index].childlist" :key="index">
							<view
								class="second-cate-item f-26 flex align-center just-center"
								:class="item.id == second_cate ? 'select' : 'normal'"
								@click.stop="onSecondCate(item, index)"
							>
								{{ item.name }}
							</view>
						</block>
					</view>
				</view>

				<view
					class="second-cate-bg"
					v-if="
						first_index > -1 &&
						second_index > -1 &&
						dataInfo.category[first_index].childlist[second_index].childlist.length > 0
					"
				>
					<view class="title f-28">{{ dataInfo.category[first_index].childlist[second_index].name }}</view>

					<view class="second-cate-list flex">
						<block
							v-for="(item, index) in dataInfo.category[first_index].childlist[second_index].childlist"
							:key="index"
						>
							<view
								class="second-cate-item f-26 flex align-center just-center"
								:class="item.id == three_cate ? 'select' : 'normal'"
								@click.stop="onThreeCate(item, index)"
							>
								{{ item.name }}
							</view>
						</block>
					</view>
				</view>

				<view class="goods-list">
					<block v-for="(item, index) in list" :key="index">
						<view class="goods-item flex align-center" @click="onDetails(item)">
							<image class="file" :src="$getImageURL(item.image)" />

							<view class="goods-info flex column">
								<view class="goods-name limit-num-line f-30 fBold">
									{{ item.title }}
								</view>

								<view class="sales f-26">销量:{{ item.sales }}</view>

								<view class="price-bg flex align-base">
									<text class="f-36">{{ item.price }}</text>
								</view>
							</view>
						</view>
					</block>

					<wanl-empty v-if="list.length === 0" />
				</view>

				<view class="safe-area"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { storeGoodsList } from "@/API/store.js";
	export default {
		props: {
			/**
			 * 店铺数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 顶部高度
			 */
			topHeight: {
				type: String,
				default: "0",
			},
		},
		data() {
			return {
				is_first: true,

				first_index: -1, //一级分类位置
				first_cate: "", //一级分类

				second_cate: "", //二级分类
				second_index: 0, //二级分类位置

				three_cate: "", //三级分类
				three_index: "", //三级分类

				page: 1,
				total: 0,
				list: [],
			};
		},
		watch: {
			dataInfo: {
				handler() {
					if (
						this.dataInfo !== null &&
						this.dataInfo.category !== undefined &&
						this.dataInfo.category.length > 0 &&
						this.is_first === true
					) {
						this.is_first = false;
						this.first_index = 0;
						this.first_cate = this.dataInfo.category[0].id;

						this.second_index = -1;
						this.second_cate = "";

						this.three_index = -1;
						this.three_cate = "";

						if (this.dataInfo.category[0].childlist.length > 0) {
							this.second_index = 0;
							this.second_cate = this.dataInfo.category[0].childlist[0].id;

							if (this.dataInfo.category[0].childlist[0].childlist.length > 0) {
								this.three_index = 0;
								this.three_cate = this.dataInfo.category[0].childlist[0].childlist[0].id;
							}
						}

						this.onRefresh();
					}
				},
				immediate: true,
			},
		},
		methods: {
			/**
			 * 关注
			 */
			handleFollow() {
				this.$emit("handleHandleFollow");
			},
			/**
			 * 一级分类点击
			 */
			onFirstCate(item, index) {
				if (this.first_cate == item.id) {
					return;
				}
				this.first_cate = item.id;
				this.first_index = index;

				this.second_index = -1;
				this.second_cate = "";

				this.three_index = -1;
				this.three_cate = "";

				if (item.childlist.length > 0) {
					this.second_index = 0;
					this.second_cate = item.childlist[0].id;

					if (item.childlist[0].childlist.length > 0) {
						this.three_index = 0;
						this.three_cate = item.childlist[0].childlist[0].id;
					}
				}
				this.onRefresh();
			},
			/**
			 * 二级分类点击
			 */
			onSecondCate(item, index) {
				if (this.second_cate == item.id) {
					return;
				}
				this.second_index = index;
				this.second_cate = item.id;

				this.three_index = -1;
				this.three_cate = "";

				if (item.childlist.length > 0) {
					this.three_index = 0;
					this.three_cate = item.childlist[0].id;
				}
				this.onRefresh();
			},
			/**
			 * 三级分类点击
			 */
			onThreeCate(item, index) {
				if (this.three_cate == item.id) {
					return;
				}
				this.three_index = index;
				this.three_cate = item.id;

				this.onRefresh();
			},
			/**
			 * 商品详情
			 */
			onDetails(item) {
				this.$jump.onGoodsDetail(item.id);
			},

			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				var category_id = "";
				if (this.second_index === -1) {
					category_id = this.first_cate;
				} else if (this.three_index == -1) {
					category_id = this.second_cate;
				} else {
					category_id = this.three_cate;
				}

				storeGoodsList({
					page: this.page,
					search: "",
					sort: "weigh",
					order: "asc",
					type: "goods",
					op: JSON.stringify({
						shop_id: "in",
						shop_category_id: "FIND_IN_SET",
					}),
					filter: JSON.stringify({
						shop_id: this.dataInfo.id,
						shop_category_id: category_id,
					}),
				}).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-local-store-index {
		width: 100%;
		overflow: hidden;

		.wrap-store-info {
			width: 100%;
			background-color: white;
			padding: 20rpx 25rpx;
			box-sizing: border-box;
			overflow: hidden;
			gap: 20rpx;

			.logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.store-info {
				flex: 1;
				overflow: hidden;
				gap: 20rpx;

				.name-bg {
					width: 100%;
					overflow: hidden;
					gap: 10rpx;

					.sign {
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						background: linear-gradient(-90deg, #fa3b26 3%, #ff4d8a 96%);
						padding: 0 12rpx;
						box-sizing: border-box;
						color: white;
						border-radius: 5rpx;
						overflow: hidden;
					}
					.name {
						flex: 1;
						--limit-num: 1;
						color: #121212;
					}
				}

				.store-score {
					width: 100%;
					overflow: hidden;
					gap: 30rpx;

					.item {
						width: fit-content;
						gap: 10rpx;
						padding-right: 30rpx;
						border-right: 2rpx solid #eeeeee;

						.text {
							color: #888888;
						}

						.score {
							color: #121212;
						}
					}

					.collect {
						height: 60rpx;
						background: $theme-gradit-color;
						color: white;
						border-radius: 18rpx;
						overflow: hidden;
						padding: 0 20rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.wrap-list {
			width: 100%;
			flex: 1;
			overflow: hidden;

			.first-cate-bg {
				width: 180rpx;
				overflow: hidden;
				background-color: #f6f6f6;

				.first-cate-item {
					width: 100%;
					min-height: 120rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid white;
					color: #888888;
				}

				.first-active {
					color: $theme-color;
					background-color: white;
				}
			}

			.title {
				color: #121212;
			}

			.list-right {
				flex: 1;
				overflow: hidden;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #f6f6f6;

				.second-cate-bg {
					width: 100%;
					overflow: hidden;
					margin-bottom: 20rpx;
					background-color: white;
					padding: 20rpx;
					box-sizing: border-box;

					.second-cate-list {
						margin-left: -20rpx;
						width: calc(100% + 20rpx);
						overflow: hidden;
						flex-wrap: wrap;

						.second-cate-item {
							margin-left: 20rpx;
							margin-top: 20rpx;
							overflow: hidden;
							height: 50rpx;
							padding: 0 20rpx;
							border-radius: 8rpx;
						}

						.normal {
							border: 2rpx solid #eeeeee;
							color: #121212;
						}
						.select {
							background: $theme-gradit-color;
							border: none;
							color: white;
						}
					}
				}

				.goods-list {
					width: 100%;
					overflow: hidden;

					.goods-item {
						width: 100%;
						overflow: hidden;
						margin-bottom: 20rpx;
						background-color: white;
						border-radius: 10rpx;
						padding: 20rpx;
						box-sizing: border-box;
						gap: 10rpx;

						.file {
							width: 120rpx;
							height: 120rpx;
						}

						.goods-info {
							flex: 1;
							min-height: 120rpx;
							overflow: hidden;
							gap: 15rpx;

							.goods-name {
								--limit-num: 2;
								color: #121212;
								line-height: 1.2em;
							}

							.sales {
								color: #888888;
							}

							.price-bg {
								color: red;
								gap: 5rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
